<template>
	<m-block className="bank-box flex-between" gap="25 30">
		<view class="flex-between">
			<template v-if="nowBanks.bankname">
				<m-icon type="rechargeIcon" wh="70" spa="0 10 0 0"></m-icon>
				<view class="dl">
					<!-- <view class="dt">
						{{nowBanks.bankname}}
					</view> -->
					<view class="dd">
						<text>尾号{{nowBanks.idcard | bankNoStr}}</text>
					</view>
				</view>
			</template>
			<view class="dl" v-else>
				<view class="dt">
					请先绑定银行卡
				</view>
			</view>
		</view>
		<m-icon type="icon-qiehuan1" wh="40" @click="Jump('/pages/wallet/bankList/bankList?select=1')"></m-icon>
	</m-block>
</template>

<script>
	import { banklist } from '@/api/Users.js'
	import { mapState } from 'vuex'
	export default {
		name: "my-bank",
		data() {
			return {
				id: ''
			};
		},
		props: {
			value: {
				type: [String, Number],
				default: ''
			},
		},
		watch: {
			'nowBanks.id'(val) {
				console.log(val)
				this.$emit('input', val)
			}
		},
		computed: {
			...mapState({
				bankCardList: state => state.user.bankCardList,
				bankCardOb: state => state.user.bankCardOb,
				nowBank: state => state.user.nowBank,
			}),
			nowBanks() {
				if (!this.nowBank?.id) return {}
				if (this.bankCardList.length <= 0) return {}
				this.id = this.bankCardList[0]['id'];
				this.$emit('input', this.id)
				return this.nowBank
			},
		},
		mounted() {
			banklist();
		},
	}
</script>

<style lang="scss">
	.bank-box {
		.dl {
			flex: 1;
			padding-left: 30rpx;

			.dt {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.dd {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}

	}
</style>